<template>
   <com-card>
      <div slot="com_title"  class="title_con">
         <div>商品分类</div>
       <div>
            <el-button type="primary"  @click="save()">添加</el-button>
        </div>
 
      </div>

      <div slot="com_content">
            <el-table :data="dataSource">
 <el-table-column label="序号" type="index"></el-table-column>
   <el-table-column label="名称" >
       <template #default="{row}">
           <div v-show="!row.flag">{{row.cateName}}</div>
       <el-input v-show="row.flag" type="text" v-model="row.cateName" size="small" />
       </template>
       
       </el-table-column>   
    <el-table-column label="是否启用" >
         <template slot-scope="{row}">
            <el-switch
              v-model="row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :disabled="!row.flag"
            ></el-switch>`
          </template>
        </el-table-column>   
      <el-table-column label="操作" >
           <template #default="{row}">
          <el-button :type="row.flag?'primary':'warning'"   
          
          size="small"
            @click="goEdite(row)">{{row.flag?'完成':'修改'}}</el-button>
           <el-button type="denger" size="small">删除</el-button>
           </template>
          </el-table-column>   
        
          </el-table>
      
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchObj.currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="searchObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      </div>
      
  </com-card>
</template>

<script>
import ComCard from "../../components/comcard/index.vue"
  import {api_query}  from "../../api/goodType"
import { api_update } from '../../api/users'
   
   export default {
       data(){
           return{
             searchObj :{
                   currentPage: 1,
                    pageSize: 2
             } ,
             dataSource: [],
             total:0
           }
       },
      components:{
          ComCard
      },
     methods:{
         //当条目下拉框的数据变化时触发的函数
    handleSizeChange(val) {
      this.searchObj.pageSize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.searchObj.currentPage = val;
      this.query();
    },
      async   query(){
      let rst=await api_query( this.searchObj);
      let {total,data}=rst;
      let arr=data.map(item=>{
          item.status=item.state==1? true:false;
          item.flag=false      
         console.log(rst)       
      return item
      })
        this.dataSource = arr;
      this.total = total;
         },
         //修改按钮
         async goEdite(row){
             if(row.flag){
                 let rst= await api_update({
                     id:row.id,
                     cateName:row.cateName,
                     state:row.status
                 });
                 let {code,msg}=rst;
                 if(code==0){
                     this.$message.success(msg)
                 }
             }
             row.flag=!row.flag
         }


     },
     mounted(){
         this.query()
     }


    }


</script>

<style lang="less" scoped>
.title_con {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>